<!DOCTYPE html>
<html>
<style>
	html,
	body {
		margin: 0;
		padding: 0;
	}
</style>

<head>

	<title>清水江学术地图</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
		integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
		crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
		integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
		crossorigin=""></script>
	<script src="bouncemarker.js"></script>
	<script src="qsj.js"></script>


</head>

<body>



	<div id="mapid" style="width: 100%; height: 100%;position: absolute;"></div>
	<script>

		var mymap = L.map('mapid', { crs: L.CRS.EPSG3857 }).setView([26.807322231920974, 108.92821172925703], 9);
		//http://t2.tianditu.gov.cn/DataServer?T=vec_w&tk=1ecb0e3e7e19fbafb7fd1a3116656d12&x=1643&y=867&l=11
		//http://t0.tianditu.gov.cn/ter_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=48ddcdea48adb5b0f00139e58dec80c1
		L.tileLayer('http://t2.tianditu.gov.cn/DataServer?T=vec_w&tk=48ddcdea48adb5b0f00139e58dec80c1&x={x}&y={y}&l={z}', {
			maxZoom: 18,
			id: 'tiandituimg',
			zoomOffset: 0
		}).addTo(mymap);
		//http://t3.tianditu.gov.cn/DataServer?T=cva_w&tk=1ecb0e3e7e19fbafb7fd1a3116656d12&x=205&y=107&l=8
		L.tileLayer('http://t3.tianditu.gov.cn/DataServer?T=cva_w&tk=48ddcdea48adb5b0f00139e58dec80c1&x={x}&y={y}&l={z}', {
			maxZoom: 18,
			id: 'tianditucia',
			zoomOffset: 0
		}).addTo(mymap);

		let qsjgeojson = L.geoJSON(
			qsjgeodata.features,
			{
				onEachFeature: (feature, layer) => {
					layer.bindTooltip(feature.properties.name + "</br>" + feature.properties.description);
					layer.addEventListener('click', (e) => {
						console.log(feature.properties.link);
					});
				},
				pointToLayer: function (feature, latlng) {
					let marker = L.marker(latlng, {
						//icon: L.icon({ iconUrl: feature.properties.name3 != null ? 'm1.png' : 'm2.png', iconSize: feature.properties.name3 != null ? [22, 37] : [40, 28] }),
						bounceOnAdd:true,
						bounceOnAddOptions:{duration:500,height:100,loop:1},
						bounceOnAddCallback:function(){console.log("lxs add markers")}
					});
					marker.bindTooltip(feature.properties.name);
					marker.addEventListener('click', (e) => {
						window.open(feature.properties.link);
					});
					return marker;
				}
			})
			.addTo(mymap);

		var popup = L.popup();

	</script>



</body>

</html>